<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-upper-text="msg">msg</p>
        自动获取焦点: <input type="text" v-focus>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 自定义全局指令
        //第一个参数为指令名，但是不要有v-开头
        Vue.directive("upper-text",{
            //一般对样式的操作在bind钩子函数当中 bind函数只调用一次
            bind:function(el){
                el.style.color="red";
            },
            //el是当前作用的dom元素 钩子函数
            //binding用于获取使用了当前指令的绑定值(value),表达式(expression),指令(name)等
            inserted:function(el,binding){
                //将所有字母内容转换为大写
                el.innerHTML=binding.value.toUpperCase();
            }
        })
        new Vue({
            el:"#app",
            data:{
                msg:"ardai 整日都很无聊的阿呆想睡觉",
            },
            //注册局部自定义指令
            //仅在当前vue实例管理的范围内生效 
            directives:{
                "focus":{
                    bind:function(el){
                        el.style.color="pink";
                    },
                    //刷新页面自动获取焦点
                    inserted:function(el){
                      el.focus();
                    },
                },
            }
        })
    </script>
</body>
</html>